<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
    		padding:0;
    		margin:0;
    	}
        #body {background-image:url(img/c.jpg);}
        #div1{z-index:-1;height:50px;width:50px;position:absolute;background:red;top:0px;left:0px;border-radius:25px;}
        .a1{
        	width:100%;
        	height:80px;
        	background-color:rgb(129,83,0);
        	/*z-index:99;*/
        }
        .a1>div{
        	float:left;
        	background-color: rgb(117,73,0);
        	width:100px;
        	height:40px;
        	margin-top:20px;
        	color:rgb(146,116,30);
        	line-height:40px;
        	text-align:center;
        	margin-left:50px;
        	z-index:999;
        }
        .a3{
        	display:none;
        	z-index:9999;
        }
        .a2:hover .a3{
        	z-index:9999;
        	background-color: aquamarine;
        	display:block;
        }
        /*div:not(#div1){
        	opacity:0.9;
        }*/
       div{
       	opacity: 0.9;
       }



        .a18{
        	color:rgb(208,188,65);
        	position:absolute;
        	top:55px;
        	right:50px;
        	height:50px;
        	width:100px;
        	font-size:25px;
        	text-align:center;
        	line-height:50px;
        }
        
        .a4{
        	margin-top:20px;
          width:100%;
          height:50px;
          color:rgb(208,188,65);
          font-size:36px;
        }
        .a5{
          width:100%;
          height:150px;
        }
        .a6,.a7{
          width:49%;
          height:150px;	
          float:left;
        }
        .a6{
        	margin-right:1%;
        }
        .a7{
        	margin-left:1%;
        }
        .a6>div{
        	height:30px;
        	font-size:20px;
        	width:100%;
        	line-height:30px;
        	color:rgb(208,188,65);
        	text-align:right;
        }
        .a7>div{
        	height:30px;
        	font-size:20px;
        	width:100%;
        	line-height:30px;
        	color:rgb(208,188,65);
        	text-align:left;
        }
        .a8{
        	width:100%;
        	height:150px;
        	margin-top:60px;
        }
        .a8>div{
        	height:30px;
        	font-size:20px;
        	width:100%;
        	line-height:30px;
        	color:rgb(208,188,65);
        	text-align:center;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        <!--当鼠标指针在元素内部移动时重复的触发 mosemove;-->
//      document.onmousemove=function(even)
//      {
//          var oDiv=document.getElementById('div1');
////            document.body  Chrome专用
//          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//          var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
//
//              var oEvent=even||event;
//              oDiv.style.top = (scrollTop+oEvent.clientY-25)+"px";
//              oDiv.style.left=(scrollLeft+oEvent.clientX-25)+"px";
//      }
$(document).mousemove(function(e){
	var oDiv=$('#div1');
	var scrollTop=$(document).scrollTop()||$('body').scrollTop();
	var scrollLeft=$(document).scrollLeft()||$('body').scrollLeft();
	oDiv.animate({top:(scrollTop+e.clientY-25)+"px",left:(scrollLeft+e.clientX-25)+"px"},18);
})

    </script>
</head>
<body id="body">
	<div class="a1">
		<div class="a2">首页	
		   <div class='a3'>
		   <div style="height:10px;width:100%;background-color:white;"></div>	
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   </div>
		</div>
		<div>起源历史</div>
		<div>糖画知识</div>
		<div>街市文化</div>
		<div>艺术展示</div>
	</div>
	<!--<div>
		<img src="img/timg.jpg" />
	</div>-->
    <div class="a4">
                如何鉴别白砂糖的质量
    </div>

    <div class="a5">
    	<div class="a6">
    		<div>1.色泽鉴别</div>
    		<div>观察白糖的色泽时，应将样品在白纸上撒成一薄层，然后观察。</div>
    		<div>良质白糖——色泽洁白明亮，有光泽。</div>
    		<div>次质白糖——白中略带浅黄色。</div>
    		<div>劣质白糖——发黄、光度暗、无光泽。</div>
    	</div>
        <div class="a7">
    		<div>2.气味鉴别</div>
    		<div>可取白糖样品直接嗅其气味，或取少许于研钵中，研碎后嗅其气味。</div>
    		<div>良质白糖——具有白糖的正常气味。</div>
    		<div>次质白糖——有轻微的糖蜜味。</div>
    		<div>劣质白糖——有酸味、酒味或其他外来气味。</div>
    	</div>
    </div>
    
    <div class="a8">
    	    <div>3.滋味鉴别</div>
    		<div>检查白糖的滋味，取少许样品直接品尝后，再配成10%的糖水溶液尝试。</div>
    		<div>良质白糖——具有纯正的甜味。</div>
    		<div>次质白糖——滋味基本正常。</div>
    		<div>劣质白糖——滋味不纯正或有外来异味。</div>
    </div>

    <div class="a18">糖画知识</div>

<div id="div1" >
</div>
</body>
</html>

